<template>
  <div>
    <!-- banner -->
    <Banner/>
    <!-- 热门活动、产品介绍 -->
    <section class="hot-act-pro-intro bg_colorff">
      <div class="hot-act">
        <p class="font-bold hot-act-title color_33 font_size32">热门活动</p>
        <ul class="hot-act-show-ul flex flex-pack-center">
          <li
            class="hot-act-show-item flex-1"
            v-for="(item,index) in hotActImg"
            @click="jumpToLink(item.link_type,item.link_url,index)"
          >
            <img :src="item.img" alt="" class="hot-act-img">
          </li>
        </ul>
      </div>
      <div class="pro-intro">
        <p class="font-bold pro-intro-title color_33 font_size32">产品介绍</p>
        <img :src="proIntroImg" alt="" class="pro-intro-img">
      </div>
    </section>
    <!-- 商品销售 -->
    <section class="pro-sell bg_coloref">
      <p class="font-bold color_33 font_size32 m_b20">商品销售</p>
      <pro-detail-list :proDetailList="proDetailList" :isHomePage='isHomePage' @loadBottom='loadBottom' :allLoaded='allLoaded'/>
    </section>
    <!-- 底部导航 -->
    <section class="bottom-tabs">
      <bottom-tabs :routerText="'首页'"/>
    </section>
  </div>
</template>

<script>
import Banner from "../components/index/banner";
import ProDetailList from "../components/public/proDetailList";
import BottomTabs from "../components/public/bottomTabs";

export default {
  data() {
    return {
      hotActImg: [], //热门活动区图片数组
      proIntroImg: "", //产品介绍区图片链接
      proDetailList: [], //商品详情列表
      pagesNum: 1, //当前页数
      maxPageNum: 0, //最大页数
      allLoaded: false, //是否宣布加载完
      isHomePage:true,//首页调取商品详情组件      
    };
  },

  components: {
    Banner,
    ProDetailList,
    BottomTabs
  },

  mounted() {
    //获取产品介绍信息
    this.$util.get("index/getGoodsDescription").then(res => {
      this.proIntroImg = res.data.image;
    });
    //获取活动列表信息
    this.$util.get("index/getActivityList").then(res => {
      this.hotActImg = res.data[0].cate;
    });
    //获取商品列表信息
    this.getPageData(false);
  },

  methods: {
    //点击热门活动跳转商品详情或外部链接
    jumpToLink(type, url, index) {
      switch (type) {
        case 3: //无连接
          return;
          break;
        case 2:
          window.open(url); //跳转外部链接
          break;
        case 1:
          this.$router.push(`/details/${this.hotActImg[index].goodid}`); //跳转商品详情页
        default:
          break;
      }
    },
    // 获取商品详情
    getPageData(isScroll = true) {
      if (isScroll) {
        if (this.pagesNum >= this.maxPageNum) {
          this.pagesNum = this.maxPageNum;
          this.allLoaded = true;
          this.$toast("无更多数据");
          return;
        } else {
          this.pagesNum++;
        }
      } else {
        this.pagesNum = 1;
      }
      this.$util
        .get("index/getGoodsPackagePaginate", {
          uid: this.$store.state.userinfo.uid,
          page: this.pagesNum
        })
        .then(res => {
          this.maxPageNum = res.data.last_page;
          this.proDetailList = res.data.data.concat(this.proDetailList);
        });
    },
    //上拉加载
    loadBottom(){
      this.getPageData(); // 上拉触发的分页查询
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../assets/css/index/index.less);
</style>
